import React, { PureComponent } from 'react'
import Filters from 'components/common/filters'
import { Form, Button, Transfer } from 'antd'
import { widgetType } from 'constants'

import PropTypes from 'prop-types'

import Style from './oper.css'

class operForm extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
    }
    this.search = this.search.bind(this)
    this.reset = this.reset.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleSelectChange = this.handleSelectChange.bind(this)
  }
  getFilterCols (authorOptionsList) {
    return [
      {
        label: '关键字搜索',
        id: 'queryName',
        widget: widgetType.input,
        placeholder: '请输入标题'
      },
      // {
      //   label: '专题活动',
      //   id: 'categoryCode',
      //   widget: widgetType.select,
      //   placeholder: '请选择分类',
      //   options: [
      //     {
      //       value: 'HUMAN_SPACE',
      //       text: '人文空间'
      //     },
      //     {
      //       value: 'FAMILY_SPACE',
      //       text: '家居室内'
      //     },
      //     {
      //       value: 'BIZ_SPACE',
      //       text: '商业空间'
      //     },
      //     {
      //       value: 'COMMON_SPACE',
      //       text: '公共空间'
      //     }
      //   ]
      // },
      // {
      //   label: '商品分类',
      //   id: 'categoryCode',
      //   widget: widgetType.select,
      //   placeholder: '请选择分类',
      //   options: [
      //     {
      //       value: 'HUMAN_SPACE',
      //       text: '人文空间'
      //     },
      //     {
      //       value: 'FAMILY_SPACE',
      //       text: '家居室内'
      //     },
      //     {
      //       value: 'BIZ_SPACE',
      //       text: '商业空间'
      //     },
      //     {
      //       value: 'COMMON_SPACE',
      //       text: '公共空间'
      //     }
      //   ]
      // },
      {
        label: '创作者',
        id: 'authorId',
        widget: widgetType.select,
        placeholder: '请选择分类',
        options: authorOptionsList
      }
    ]
  }

  reset () {
    // this.props.getRecycleList({
    //   pageNo: 1,
    //   pageSize: 20
    // })
  }
  search (values) {
    // this.props.getRecycleList(values)
  }

  handleChange (nextTargetKeys, direction, moveKeys) {
    this.setState({ targetKeys: nextTargetKeys })

    console.log('targetKeys: ', nextTargetKeys)
    console.log('direction: ', direction)
    console.log('moveKeys: ', moveKeys)
  };

  handleSelectChange (sourceSelectedKeys, targetSelectedKeys) {
    this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] })

    console.log('sourceSelectedKeys: ', sourceSelectedKeys)
    console.log('targetSelectedKeys: ', targetSelectedKeys)
  }

  render () {
    const { targetKeys } = this.state
    const { form, authorOptionsList } = this.props
    const mockData = []
    for (let i = 0; i < 20; i++) {
      mockData.push({
        key: i.toString(),
        title: `content${i + 1}`,
        description: `description of content${i + 1}`
      })
    }
    return (
      <div className={Style['oper-container']}>
        <Filters cols={this.getFilterCols(authorOptionsList)} form={form} search={this.search} reset={this.reset} />
        <div className={Style['transfer-container']}>
          <Transfer
            dataSource={mockData}
            listStyle={{
              width: 300,
              height: 486
            }}
            operations={['确定', '移除']}
            targetKeys={targetKeys}
            onChange={this.handleChange}
            render={item => `${item.title}`}
          />
        </div>
        <div className={Style['btn-container']}>
          <Button type='primary' ghost onClick={this.props.selectProperty}>
            上一步，填写商品属性
          </Button>
          <Button type='primary' style={{ marginLeft: '20px' }} onClick={this.props.handleSubmit}>
            完成，提交商品
          </Button>
        </div>
      </div>
    )
  }
}

operForm.propTypes = {
  selectProperty: PropTypes.func,
  handleSubmit: PropTypes.func,
  form: PropTypes.any,
  authorOptionsList: PropTypes.any
}

const oper = Form.create()(operForm)

export default oper
